<template>
  <div class="hello">
    <div class="marquee">
      <div class="marquee_title">
        <img src="../img/rall.png" alt />
      </div>
      <div class="marquee_box">
        <ul class="marquee_list" :class="{marquee_top:animate}">
          <li v-for="(item,index) in marqueeList" :key="index">{{item.name}}</li>
        </ul>
      </div>
    </div>
    <div class="first">
      <ul>
        <li>
          <b>&nbsp;荐</b>
          <p>莱州论坛APP - 莱州人的生活助手</p>
        </li>
        <li>
          <b>&nbsp;荐</b>
          <p>免费注册网站会员,可随时修改/删除信息！</p>
        </li>
        <li>
          <b style="width:32px">&nbsp;荐</b>
          <p>本站信息均由用户免费发布,严禁违法、重复发布!</p>
        </li>
      </ul>
    </div>
    <div class="center">
      <img src="../img/1.jpg" alt />
    </div>
    <div class="dao">
      <ul v-for="items in yiji" :key="items.name">
        <li style="height:45px">
          <i>
            <img src="../img/gou.gif" alt />
          </i>
          <h2 @click="biao(items.name)">{{items.name}}</h2>
          <span class="more" @click="biao(items.name)">更多>></span>
        </li>
        <li class="erji">
          <div class="erji" v-for="item in getErji(items.name)" :key="item.name">
            <a href="javascripe:;" @click="xiang(item)">{{item.name}}</a>
          </div>
        </li>
      </ul>
    </div>
    <div class="footer">
      <a href="#" class="one">
        <i>
          <img src="../img/shan.png" alt />
        </i>
        <span style="margin-left:3px">删除电话被冒用的信息</span>
      </a>
      <a href="#" class="two">
        <i>
          <img src="../img/letter.png" alt />
        </i>
        <span class="lian">联系我们</span>
      </a>
    </div>
    <div class="foot">
      <ul>
        <li style="color: #5F6880;">手机版</li>
        <li>电脑版</li>
        <li>莱州论坛客户端</li>
      </ul>
      <p>联系电话：0535-2892666</p>
      <ul style="padding-bottom:10px">
        <li>莱州信息网</li>
        <li>站长统计</li>
      </ul>
      <p>法律顾问:山东生活帮律师事务所</p>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      order: [],
      yiji: [],
      list: [],
      animate: false,
      marqueeList: [
        {
          name: "即日起莱州信息网发布信息需要实名认证"
        },
        {
          name: "免费注册会员用户可以修改/删除信息"
        }
      ]
    };
  },
  created: function() {
    setInterval(this.showMarquee, 3000);
  },
  mounted() {
    this.getData();
  },
  methods: {
    xiang(name) {
      localStorage.setItem("zxwx-", JSON.stringify(name));
      this.$router.push("/detail");
    },
    biao(n) {
      var arr = this.getErji(n)
      // console.log(arr.id)
      // for(var i=0;i<arr.length;i++){
      //   console.log(arr[i].id==2)
      // }
      localStorage.setItem("daohang-", JSON.stringify(arr));
      this.$router.push("/detail");
    },
    getData() {
      axios({
        method: "get",
        url: "http://localhost/api.php/type",
        params: {
          transform: 1,
          order: "id"
        }
      }).then(res => {
        this.order = res.data.type;
        this.yiji = this.order.filter(item => {
          return item.level == "一级菜单";
        });
      });
    },
    getErji(yijiName) {
      let arr = this.order.filter(item => {
        return item.belong == yijiName;
      });
      this.list = arr;
      return arr;
    },
    showMarquee: function() {
      this.animate = true;
      setTimeout(() => {
        this.marqueeList.push(this.marqueeList[0]);
        this.marqueeList.shift();
        this.animate = false;
      }, 500);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.marquee {
  width: 100%;
  height: 40px;
  align-items: center;
  color: #3a3a3a;
  background-color: white;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
}
.marquee_title {
  padding: 0 10px;
  height: 21px;
  font-size: 14px;
  align-items: center;
}
.marquee_title img {
  width: 20px;
  height: 16px;
}
.marquee_box {
  display: block;
  position: relative;
  width: 100%;
  height: 30px;
  overflow: hidden;
}
.marquee_list {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.marquee_top {
  transition: all 0.5s;
  margin-top: -30px;
}
.marquee_list li {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  padding-left: 4px;
  color: rgb(255, 0, 0);
}
.dao i img {
  margin-right: 7px;
  border-radius: 50%;
}
.foot ul {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.foot {
  margin-bottom: 36px;
  font-size: 12px;
  color: #999;
  text-align: center;
}
.foot p {
  padding-bottom: 20px;
}
.foot ul li {
  padding: 0 6px;
}
.footer a i {
  height: 100%;
  position: relative;
}
.footer i img {
  width: 15px;
  height: 15px;
  position: absolute;
  top: 1px;
  left: -15px;
}
.footer a .lian {
  margin-left: 5px;
}
.footer a {
  text-align: center;
  background: #fff;
  border: 1px solid #dcdee0;
  color: #5f6880;
  display: inline-block;
  font-size: 14px;
  height: 35px;
  line-height: 35px;
}
.footer a {
  background: #fff;
}
.footer .one {
  width: 190px;
}
.footer .two {
  width: 96px;
  padding: 0 5px;
}
.footer {
  display: flex;
  padding: 15px 10px;
  justify-content: center;
}
.dao {
  background: #fff;
}
.dao ul li span {
  color: #f0f0f0;
}
.dao ul li {
  display: flex;
  align-items: center;
  margin: 0 10px;
  border-bottom: 1px solid #f0f0f0;
  box-sizing: border-box;
}
.dao ul li a {
  text-align: center;
  color: #666;
  margin: 12px 0;
  font-size: 14px;
  width: 33.33%;
}
.dao ul {
  background: #fff;
  border-top: 1px solid #e3e3e3;
  border-bottom: 1px solid #d9d9d9;
  margin: 12px 0 0;
  padding-top: 3px;
}
.dao .more {
  font-size: 12px;
  color: #999;
}
.dao h2 {
  flex: 1;
  font-size: 18px;
  color: #333;
}
.center {
  margin-top: 5px;
  margin-bottom: 5px;
  width: 100%;
}
.center img {
  width: 100%;
}
.first ul li {
  display: flex;
  align-items: center;
  width: 100%;
  height: 45px;
  border-bottom: 1px dashed #cccccc;
  box-sizing: border-box;
}
.first ul p {
  color: #666666;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 500px;
  width: 267px;
  white-space: nowrap;
}
.first ul b {
  background: url("../img/card.png");
  width: 32px;
  height: 23px;
  line-height: 23px;
  display: inline-block;
  margin: 0 10px;
  font-size: 14px;
}
li.erji {
  display: flex;
  flex-wrap: wrap;
  justify-content: stretch;
}
div.erji {
  flex-basis: 25%;
  padding: 5px;
  margin: 5px;
}
</style>
